<template>
	<view class="top" ref="topRef" :style="menuStyle">
		<view v-if="props.back"  @click="backBtn" class="back" :style="{width:menuStyle.height,hegiht:menuStyle.height}">
			<uni-icons type="back" size="20" color="#fff"></uni-icons>
		</view>
		{{title}}
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'


	const menuStyle = reactive({
		height: '44px',
		paddingTop: '0px',
		lineHeight: '44px',
	})
	// #ifdef MP-WEIXIN
	let menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// 胶囊按钮与顶部的距离
	menuStyle.paddingTop = menuButtonInfo.top + 'px';
	// 胶囊高度
	menuStyle.height = menuButtonInfo.height + 'px';
	// 文字垂直居中
	menuStyle.lineHeight = menuButtonInfo.height + 'px';
	console.log(menuStyle);
	// #endif

	// 页面标题
	const props = defineProps({
		title: {
			type: String,
			default: "轨道勤务"
		},
		back: {
			type: Boolean,
			default: false
		}
	})
	
	// 返回上一页
	const backBtn = ()=>{
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		background: transparent;
		text-align: center;
		font-size: 34rpx;
		color: #fff;
		position: relative;

	}

	.back {
		position: absolute;
		left: 10rpx;
		background: rgba(0, 0, 0, .3);
		color: #fff;
		border-radius: 50%;
	}
</style>
